/*
 * @Author: shijianxin
 * @Date: 2022-03-28 22:00:36
 * @Description: 棋盘组件
 */
import React from "react";
import { ChessType } from "../../types/enums";
import { ChessComp } from "../ChessComp/ChessComp";
import "./BoardComp.css";

interface IProps {
  chesses: ChessType[];
  isGameOver?: boolean;
  onClick?: (index: number) => void;
}

export const BoardComp: React.FC<IProps> = function (props) {
  //   const isGameOver = props.isGameOver!; // 非空断言
  const isGameOver = props.isGameOver as boolean;
  const list = props.chesses.map((type, i) => (
    <ChessComp
      key={i}
      type={type}
      onClick={() => {
        if (props.onClick && !isGameOver) {
          props.onClick(i);
        }
      }}
    />
  ));
  return <div className="board">{list}</div>;
};

// props默认值
BoardComp.defaultProps = {
  isGameOver: false,
};
